<template>
  <div class="editor-box">
    <QuillEditor content-type="html" v-model:content="content" :options="editorOption" />
  </div>
</template>
<script setup>
import { reactive, ref, watchEffect } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import Quill from 'quill'

const Parchment = Quill.import('parchment')

class lineHeightAttributor extends Parchment.Attributor.Class {}

const lineHeightStyle = new lineHeightAttributor('lineheight', 'ql-lineheight', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['1', '1-5', '1-75', '2', '3', '4', '5']
})

Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)

class letterSpacingAttributor extends Parchment.Attributor.Class {}
const letterSpacingStyle = new letterSpacingAttributor('letterspacing', 'ql-letterspacing', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['1', '2', '3', '4', '5', '6', '7']
})
Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true)

const props = defineProps({
  // 默认值
  value: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:value'])

const content = ref(props.value)
const editorOption = reactive({
  modules: {
    toolbar: [
      // 工具栏配置
      ['bold', 'italic', 'underline', 'strike'], // 粗体、斜体、下划线、删除线
      [{ color: [] }, { background: [] }], // 字体颜色和背景色
      [{ header: 1 }, { header: 2 }], // 标题1和标题2
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表和无序列表
      [{ script: 'sub' }, { script: 'super' }], // 上标和下标
      [{ indent: '-1' }, { indent: '+1' }], // 缩进
      [{ direction: 'rtl' }], // 文字方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字号
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题等级
      [{ font: [] }], // 字体
      [{ align: [] }], // 对齐方式
      ['clean'], // 清除格式
      [{ lineheight: ['1', '1-5', '1-75', '2', '3', '4', '5'] }],
      [{ letterspacing: ['1', '2', '3', '4', '5', '6', '7'] }],
      ['link', 'image', 'video']
    ]
  },
  placeholder: '请输入内容...',
  theme: 'snow'
})
// 内容有变化，就更新内容，将值返回给父组件
watchEffect(() => {
  emit('update:value', content.value)
})
</script>

<style lang="scss">
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1-5']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1-5']::before {
  content: '1.5';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1-75']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1-75']::before {
  content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
.ql-snow .ql-editor .ql-lineheight-1 {
  line-height: 1;
}
.ql-snow .ql-editor .ql-lineheight-1-5 {
  line-height: 1.5;
}
.ql-snow .ql-editor .ql-lineheight-1-75 {
  line-height: 1.75;
}
.ql-snow .ql-editor .ql-lineheight-2 {
  line-height: 2;
}
.ql-snow .ql-editor .ql-lineheight-3 {
  line-height: 3;
}
.ql-snow .ql-editor .ql-lineheight-4 {
  line-height: 4;
}
.ql-snow .ql-editor .ql-lineheight-5 {
  line-height: 5;
}

.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='6']::before {
  content: '6';
}
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value='7']::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value='7']::before {
  content: '7';
}
.ql-snow .ql-picker.ql-letterspacing {
  width: 70px;
}
.ql-snow .ql-editor .ql-letterspacing-1 {
  letter-spacing: 1px;
}
.ql-snow .ql-editor .ql-letterspacing-2 {
  letter-spacing: 2px;
}
.ql-snow .ql-editor .ql-letterspacing-3 {
  letter-spacing: 3px;
}
.ql-snow .ql-editor .ql-letterspacing-4 {
  letter-spacing: 4px;
}
.ql-snow .ql-editor .ql-letterspacing-5 {
  letter-spacing: 5px;
}
.ql-snow .ql-editor .ql-letterspacing-6 {
  letter-spacing: 6px;
}
.ql-snow .ql-editor .ql-letterspacing-7 {
  letter-spacing: 7px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}
</style>